import React,{Component} from 'react';

import '../assets/css/index.css';

class Home extends Component{

    constructor(props){
        super(props);

        this.state = {
            name: 'burt',
            age: 27,
            lists: [
                { title: '新闻', },
                { title: '体育', },
                { title: '八卦', },
            ],
        }
        this.getName = this.getName.bind(this);
        this.setName = this.setName.bind(this);
    }

    //组件的生命周期函数
    componentDidMount(){
        console.log('组件挂载')
    }

    getName(){
        console.log(this.state.name);
    }

    setName(name){
        this.setState({
            name: 'hahah'
        });
    }

    run(){

    }

    inputChange=(e)=>{
        this.setState({
            name: e.target.value
        });
    }

    onSubmit=(e)=>{
        //阻止submit的提交事件
        e.preventDefault();
        console.log(this.state.name);
    }

    render(){
        return(
            <div>
                {this.state.name}
                <button className="red" onClick={this.getName.bind(this)}>点击</button>
                <button onClick={this.setName.bind(this,'杨')}>更改传值</button>
                
                <ul>
                    {
                        this.state.lists.map(function(val,key){
                            return <li key={key}>{val.title}</li>
                        })
                    }
                </ul>

                <form onSubmit={this.onSubmit}>
                    <input type="text" value={this.state.name} onChange={this.inputChange} />
                    <input type="submit" value='提交' />
                </form>
            </div>
            
        )
    }
}


Home.defaultProps = {
    title: '这是默认值'
}

/* 1. defaultProps: 父子组件传值中，如果父组件调用子组件时候不给子组件传值，则可以在子组件中使用defaultProps定义的默认值
在子组件中定义:
Header.defaultProps = {
    title: '这是默认值'
}

2. propTypes: 验证父组件传值的类型合法性
在子组件中定义:
验证器文档:https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes
import PropTypes from 'prop-types';
Header.propTypes = {
    name: PropTypes.string
} */
export default Home;